<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>item2</title>
</head>
<style>
  th, td{
    width: 250px;
    border: 1px solid #999999;
  }
  em{
    color: red;
  }
</style>
<body>
<div id="app">

  <input type="text" v-model="key">
  <button @click="search">搜索</button>
  <br>
  <div>
    <button @click="page--">前一页</button>
    <span style="color:red">{{page}}</span>
    <button @click="page++">后一页</button>
  </div>
  <hr>
  <!--商品列表-->
  <table>
    <tr>
      <th>商品id</th>
      <th>商品标题</th>
      <th>商品价格</th>
      <th>商品销量</th>
      <th>商品图片</th>
      <th>时间</th>
    </tr>
    <tr v-for="item in items">
      <td>{{item.id}}</td>
      <td v-html="item.title"></td>
      <td>{{item.price/100}}</td>
      <td>{{item.sold}}</td>
      <td>
        <img :src="item.image" alt="1" width="50" height="50">
      </td>
      <td>{{item.updateTime}}</td>
    </tr>
  </table>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
  // 组件
  let elButton = {
    template: "<div> <button style='background-color:dodgerblue;' @click='num++'>el-呵呵</button> </div>", // 模板
    data:{
      num:0,
    },
    methods:{}
  };
Vue.component("el-button", elButton);
  // 创建Vue示例
  let app = new Vue({
    el: "#app",
    data: {
      key:"小米",
      items: [],
      page: 1
    },
    methods: {
      search(){
        axios.get("/item/list?key="+ this.key + "&page="+ this.page)
          .then(resp => {
            this.items = resp.data.items;
          })
          .catch(err => console.log(err))
      }
    },
    watch:{
      page(){
        this.search();
      }
    }
  });
</script>
</body>
</html>